<template>
<div>
  <div class='top'>动态</div> 
  <div class="trend1">
   <div class='search1'>
    <span class="left">评论</span><span class="right">></span>
    </div>
    <div class='search2'>
    <span class="left">私信</span><span class="right">></span>
    </div>
    <div class='search3'>
    <span class="left">关注</span><span class="right">></span>
    </div>
    <p class='hh'></p>
   <div class='search4'>
    <span class="left">播放历史</span><span class="right">></span>
    </div>
    <div class='search5'>
    <span class="left">扫一扫</span><span class="right">></span>
    </div>
      <p class='hh'>
    <div class='search6'>

    <span class="left"><i><img src="../../../static/images/36/dynamic_sys_icon.png" alt=""></i><i class="xitong">系统消息</i></span><span class="right">></span>
    </div>
  </div>
</div>
</template>
<script>
	// require('../../less/other/other_trend.less');
</script>
<style scoped lang='less'>

div{
  background:#f2eef9;
  height:10rem;
}
.top{
    font-size:35/64rem;
    color:#ffffff;
  background:#a54be8;
  height:2.5rem;
  line-height:2.5rem;
  text-align: center;
  margin-bottom:30/64rem;
}
.trend1{
  display:inline-block;
  background:#ffffff;
  height:9rem;

 .search1{
    display: inline-block;
    margin-left:1rem;
    width:80%;
    height:1.5rem;
    font-size:35/64rem;
    color:#1b1b1b;
    line-height:1.5rem;
    border-bottom:1/64rem solid #f2eef9;
    background:#ffffff;
    background:url(../../../static/images/36/dynamic_comment_icon.png)no-repeat 1/64rem center;
    background-size:8%;
    .left{
      margin-left:1rem;
    }
    .right{
       float:right;
      color:#c8c5ce;
        margin-left:1rem;
    }
}

.search2{
    display: inline-block;
    margin-left:1rem;
    width:80%;
    height:1.5rem;
    font-size:35/64rem;
    color:#1b1b1b;
    line-height:1.5rem;
    border-bottom:1/64rem solid #c8c5ce;
    background:#ffffff;
    background:url(../../../static/images/36/dynamic_msg_icon.png)no-repeat 1/64rem center;
    background-size:8%;
    .left{
      margin-left:1rem;
    }
    .right{
      float:right;
      color:#c8c5ce;
    }
}

.search3{

    display: inline-block;
    margin-left:1rem;
    width:80%;
    height:1.5rem;
    font-size:35/64rem;
    color:#1b1b1b;
    line-height:1.5rem;
    // border-bottom:1/64rem solid #c8c5ce;
    background:#ffffff;
    background:url(../../../static/images/36/dynamic_attention_icon.png)no-repeat 1/64rem center;
    background-size:8%;
    .left{
      margin-left:1rem;
    }
    .right{
      float:right;
      color:#c8c5ce;
    }
}
.hh{
  width:100%;
  height:40/64rem;
  background:#f2eef9;
}
.search4{
    display: inline-block;
    margin-left:1rem;
    width:80%;
    height:1.5rem;
    font-size:35/64rem;
    color:#1b1b1b;
    line-height:1.5rem;
    border-bottom:1/64rem solid #c8c5ce;
    background:#ffffff;
    background:url(../../../static/images/36/dynamic_history_icon.png)no-repeat 1/64rem center;
    background-size:8%;
    .left{
      margin-left:1rem;
    }
    .right{
      float:right;
      color:#c8c5ce;
    }
}
.search5{
    display: inline-block;
    margin-left:1rem;
    width:80%;
    height:1.5rem;
    font-size:35/64rem;
    color:#1b1b1b;
    line-height:1.5rem;
    // border-bottom:1/64rem solid #c8c5ce;
    background:#ffffff;
    background:url(../../../static/images/36/dynamic_scan_icon.png)no-repeat 1/64rem center;
    background-size:8%;
    .left{
      margin-left:1rem;
    }
    .right{
      float:right;
      color:#c8c5ce;
    }
}
.search6{
    padding-left: 58/64rem;
   background-color: white;
    height:1.5rem;
    font-size:35/64rem;
    color:#1b1b1b;
    line-height:1.5rem;
  i{
    position: relative;
    
    left:-58/64rem;
    img{
        width: 40/64rem;
        height: 42/64rem;
        top:7/64rem;
    }
  }
  .xitong{
    padding-left: 20/64rem;
    padding-bottom:10/64rem;
  }
    .left{
      margin-left:1rem;
    }
    .right{
      float:right;
      color:#c8c5ce;
        margin-right:1rem;
    }
  }
}

.botm{
  margin-top:7rem;
  display:inline-block;
  background:#ffffff;
  height:1.5rem;
  line-height:1.8rem;
  width:100%;
    
.s1{
        margin-top:0.4rem;
    background:url(../../../static/images/1/main_trailer_normal.png)no-repeat center 0;
    display:inline-block;
    background-size:30%;
    padding:0 0.6rem;
    width:11%;
    height:1.5rem;
    text-align:center;
    font-size:24/64rem;
    color:#c8c5ce;
    margin-left:0.2rem;

    
  }
  .s2{
        margin-top:0.4rem;
    background:url(../../../static/images/1/main_circle_normal.png)no-repeat center 0;
    display:inline-block;
    background-size:30%;
    padding:0 0.6rem;
    width:11%;
    height:1.5rem;
    text-align:center;
    font-size:24/64rem;
    color:#c8c5ce;  
  }
  .s3{
        margin-top:0.4rem;
    background:url(../../../static/images/1/main_dynamic_normal.png)no-repeat center 0;
    display:inline-block;
    background-size:30%;
    padding:0 0.6rem;
    width:11%;
    height:1.5rem;
    text-align:center;
    font-size:24/64rem;
    color:#c8c5ce;  
  }
  .s4{
        margin-top:0.4rem;
    background:url(../../../static/images/1/main_profile_selected.png)no-repeat center 0;
    display:inline-block;
    background-size:30%;
    padding:0 0.6rem;
    width:11%;
    height:1.5rem;
    text-align:center;
    font-size:24/64rem;
    color:#c8c5ce;  
  }
}

</style>